<template>
  <div class="home-container">
    <transition name="el-zoom-in-top">
      <router-view />
    </transition>
    <svg-icon icon-class="down" class-name="down" @click="resume" v-show="show"/>
  </div>
</template>

<script>
import {defineComponent, ref } from 'vue';
import { useRouter } from "vue-router";
export default defineComponent({
  name: 'Home',
  components:{
    // SvgIcon,
    // Welcome,
    // Resume
  },
  setup() {
    const { push } = useRouter();
    const show = ref(true)
    function resume(){
      push({path:'/resume'})
      show.value = false
    }
    return {
      show,
      resume
    }
  },

})
</script>
<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/header-bg.jpg") ;
  background-size: 100% 100%;
  .resume-class{
    animation: bounceInBottom 1s;
  }
  .down{
    position: fixed;
    color:#ffffff;
    font-size:30px ;
    bottom: 10px;
    left: 50%;
    right: 50%;
    z-index: 99;
    animation: twinkle 0.8s infinite alternate;
    cursor: pointer;
  }
  @keyframes twinkle {
    0%{
      opacity:0.8;
    }
    100%{
      opacity:0;
    }
  }
}
</style>